React 'useEvent' ํ ์ ๊ตฌํ, ์ฅ์ , ์์ ์ ์ธ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐธ์กฐ ๋ณด์ฅ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ์ฑ๋ฅ ๊ฐ์ ๊ณผ ๋ฆฌ๋ ๋๋ง ๋ฐฉ์ง์ ๋ํ ๊ธ๋ก๋ฒ ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ์์ ๋ฅผ ํฌํจํฉ๋๋ค.
React useEvent ๊ตฌํ: ์ต์ React๋ฅผ ์ํ ์์ ์ ์ธ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐธ์กฐ
์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React๋ ์ฐ๋ฆฌ๊ฐ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ ํ๋ช ์ ์ผ์ผ์ผฐ์ต๋๋ค. ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ํคํ ์ฒ๋ ํ ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ๊ณผ ๊ฒฐํฉ๋์ด ๊ฐ๋ฐ์๊ฐ ๋ณต์กํ๊ณ ๋์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค. ํจ์จ์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์์ด ์ค์ํ ์ธก๋ฉด ์ค ํ๋๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ด๋ฉฐ, ์ด๋ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ด ๊ธ์์๋ 'useEvent' ํ ์ ๊ตฌํ์ ๋ํด ์์ธํ ์์๋ณด๊ณ , ์์ ์ ์ธ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐธ์กฐ๋ฅผ ์์ฑํ๊ณ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด React ์ปดํฌ๋ํธ๋ฅผ ์ต์ ํํ๋ ์๋ฃจ์ ์ ์ ๊ณตํฉ๋๋ค.
๋ฌธ์ ์ : ๋ถ์์ ํ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ๋ฆฌ๋ ๋๋ง
React์์๋ ์ปดํฌ๋ํธ ๋ด์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ ์ํ ๋ ๊ฐ ๋ ๋๋ง๋ง๋ค ์๋ก ์์ฑ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ด๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ํ ์๋ก์ด ํจ์๊ฐ ์์ฑ๋๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ด๋ ํํ ํจ์ ์ด๋ฉฐ, ํนํ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์์ ์ปดํฌ๋ํธ์ prop์ผ๋ก ์ ๋ฌ๋ ๋ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ์์ ์ปดํฌ๋ํธ๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ๊ธฐ๋ณธ ๋ก์ง์ด ๋ณ๊ฒฝ๋์ง ์์์์๋ ๋ถ๊ตฌํ๊ณ ์๋ก์ด prop์ ๋ฐ์ ๋ฆฌ๋ ๋๋ง๋ฉ๋๋ค.
์ด๋ ๊ฒ ์๋ก์ด ์ด๋ฒคํธ ํธ๋ค๋ฌ ํจ์๊ฐ ๊ณ์ ์์ฑ๋๋ฉด ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ด ์ ํ๋ ์ ์์ผ๋ฉฐ, ํนํ ์๋ง์ ์ปดํฌ๋ํธ๊ฐ ์๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. ์ด ๋ฌธ์ ๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ด ๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ์ค๊ณ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋์ฑ ์ฌํ๋ฉ๋๋ค. ์ฌ์ํ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ด๋ผ๋ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด๊ณผ ๊ธฐ๊ธฐ ์ฑ๋ฅ์ ๊ฑธ์ณ ๋์ ๋๋ ์ง์ฐ์ ์ ๋ฐํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
๋ค์์ ๊ฐ๋จํ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
function MyComponent() {
const [count, setCount] = React.useState(0);
const handleClick = () => {
setCount(count + 1);
console.log('Clicked!');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
<p>Count: {count}</p>
</div>
);
}
์ด ์์ ์์ `handleClick`์ ๋ก์ง์ด ๋์ผํจ์๋ ๋ถ๊ตฌํ๊ณ `MyComponent`๊ฐ ๋ ๋๋ง๋ ๋๋ง๋ค ์ฌ์์ฑ๋ฉ๋๋ค. ์ด ์์ ์์ ์์๋ ํฐ ๋ฌธ์ ๊ฐ ์๋ ์ ์์ง๋ง, ์ฌ๋ฌ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์์ ์ปดํฌ๋ํธ๊ฐ ์๋ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ด ์๋นํ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : useEvent ํ
`useEvent` ํ ์ ๋ฆฌ๋ ๋๋ง ์ ๋ฐ์ ๊ฑธ์ณ ์ด๋ฒคํธ ํธ๋ค๋ฌ ํจ์๊ฐ ์์ ์ ์ผ๋ก ์ ์ง๋๋๋ก ๋ณด์ฅํจ์ผ๋ก์จ ์ด ๋ฌธ์ ์ ๋ํ ํด๊ฒฐ์ฑ ์ ์ ๊ณตํฉ๋๋ค. ์ด ํ ์ ํจ์์ ๋์ผ์ฑ์ ๋ณด์กดํ๋ ๊ธฐ์ ์ ํ์ฉํ์ฌ ๋ถํ์ํ prop ์ ๋ฐ์ดํธ์ ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํฉ๋๋ค.
useEvent ํ ๊ตฌํ
๋ค์์ `useEvent` ํ ์ ์ผ๋ฐ์ ์ธ ๊ตฌํ์ ๋๋ค:
import { useCallback, useRef } from 'react';
function useEvent(callback) {
const ref = useRef(callback);
// Update the ref if the callback changes
ref.current = callback;
// Return a stable function that always calls the latest callback
return useCallback((...args) => ref.current(...args), []);
}
์ด ๊ตฌํ์ ๋ถ์ํด ๋ณด๊ฒ ์ต๋๋ค:
- `useRef(callback)`: `useRef` ํ ์ ์ฌ์ฉํ์ฌ ์ต์ ์ฝ๋ฐฑ์ ์ ์ฅํ `ref`๋ฅผ ์์ฑํฉ๋๋ค. Ref๋ ๋ฆฌ๋ ๋๋ง ์์๋ ๊ฐ์ ์ ์งํฉ๋๋ค.
- `ref.current = callback;`: `useEvent` ํ ๋ด๋ถ์์ `ref.current`๋ ํ์ฌ `callback`์ผ๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋ค. ์ด๋ ์ปดํฌ๋ํธ์ `callback` prop์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค `ref.current`๋ ์ ๋ฐ์ดํธ๋๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ค์ํ ์ ์ ์ด ์ ๋ฐ์ดํธ๊ฐ `useEvent` ํ ์์ฒด๋ฅผ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ์ ๋ฆฌ๋ ๋๋ง์ ์ ๋ฐํ์ง ์๋๋ค๋ ๊ฒ์ ๋๋ค.
- `useCallback((...args) => ref.current(...args), [])`: `useCallback` ํ ์ ๋ฉ๋ชจ์ด์ ์ด์ ๋ ์ฝ๋ฐฑ์ ๋ฐํํฉ๋๋ค. ์์กด์ฑ ๋ฐฐ์ด(์ด ๊ฒฝ์ฐ `[]`)์ ๋ฐํ๋ ํจ์(`(โฆargs) => ref.current(โฆargs)`)๊ฐ ์์ ์ ์ผ๋ก ์ ์ง๋๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ ์์กด์ฑ ๋ฐฐ์ด์ด ๋น์ด ์๊ธฐ ๋๋ฌธ์ ์์กด์ฑ์ด ๋ณ๊ฒฝ๋์ง ์๋ ํ, ๋ฆฌ๋ ๋๋ง ์ ํจ์ ์์ฒด๊ฐ ์ฌ์์ฑ๋์ง ์์์ ์๋ฏธํฉ๋๋ค. ๋ฐํ๋ ํจ์๋ ๋จ์ํ `useEvent` ํ ์ ์ ๊ณต๋ `callback`์ ์ต์ ๋ฒ์ ์ ๋ณด์ ํ๊ณ ์๋ `ref.current` ๊ฐ์ ํธ์ถํฉ๋๋ค.
์ด ์กฐํฉ์ `ref.current`๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์์ ์ ์ผ๋ก ์ ์ง๋๋ฉด์๋ ์ปดํฌ๋ํธ ์ค์ฝํ์ ์ต์ ๊ฐ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
useEvent ํ ์ฌ์ฉํ๊ธฐ
์ด์ ์ด์ ์์ ์์ `useEvent` ํ ์ ์ฌ์ฉํด ๋ณด๊ฒ ์ต๋๋ค:
import React from 'react';
function useEvent(callback) {
const ref = React.useRef(callback);
// Update the ref if the callback changes
ref.current = callback;
// Return a stable function that always calls the latest callback
return React.useCallback((...args) => ref.current(...args), []);
}
function MyComponent() {
const [count, setCount] = React.useState(0);
const handleClick = useEvent(() => {
setCount(count + 1);
console.log('Clicked!');
});
return (
<div>
<button onClick={handleClick}>Click me</button>
<p>Count: {count}</p>
</div>
);
}
์์ ๋ ์ด ์์ ์์๋ `useEvent` ํ ๋๋ถ์ `handleClick`์ด ํ ๋ฒ๋ง ์์ฑ๋ฉ๋๋ค. ์ดํ `MyComponent`๊ฐ ๋ฆฌ๋ ๋๋ง๋์ด๋ `handleClick` ํจ์๋ ์ฌ์์ฑ๋์ง *์์ต๋๋ค*. ์ด๋ ์ฑ๋ฅ์ ๊ฐ์ ํ๊ณ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ์ค์ฌ ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ํนํ `MyComponent`์ ์์ ์ปดํฌ๋ํธ์ด๋ฉด์ `handleClick`์ prop์ผ๋ก ๋ฐ๋ ์ปดํฌ๋ํธ์ ์ ์ฉํฉ๋๋ค. ๋ค๋ฅธ prop์ด ๋ณ๊ฒฝ๋์ง ์์๋ค๋ฉด `MyComponent`๊ฐ ๋ฆฌ๋ ๋๋ง๋ ๋ ๋ ์ด์ ํจ๊ป ๋ฆฌ๋ ๋๋ง๋์ง ์์ ๊ฒ์ ๋๋ค.
useEvent ์ฌ์ฉ์ ์ด์
- ์ฑ๋ฅ ํฅ์: ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ์ค์ฌ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ์ข์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ญ๋๋ค. ์ด๋ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๊ฐ์ง ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๊ณ ๋ คํ ๋ ํนํ ์ค์ํฉ๋๋ค.
- ์ต์ ํ๋ Prop ์ ๋ฐ์ดํธ: ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์์ ์ปดํฌ๋ํธ์ prop์ผ๋ก ์ ๋ฌํ ๋ `useEvent`๋ ํธ๋ค๋ฌ์ ๊ธฐ๋ณธ ๋ก์ง์ด ์ค์ ๋ก ๋ณ๊ฒฝ๋์ง ์๋ ํ ์์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
- ๋ ๊น๋ํ ์ฝ๋: ๋ง์ ๊ฒฝ์ฐ `useCallback`์ ์ฌ์ฉํ ์๋ ๋ฉ๋ชจ์ด์ ์ด์ ์ ํ์์ฑ์ ์ค์ฌ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ฝ๊ณ ์ดํดํ ์ ์๊ฒ ๋ง๋ญ๋๋ค.
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ์ง์ฐ์ ์ค์ด๊ณ ๋ฐ์์ฑ์ ๊ฐ์ ํจ์ผ๋ก์จ `useEvent`๋ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ธฐ์ฌํ๋ฉฐ, ์ด๋ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์ ์นํ๊ณ ์ ์งํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ๋๋ `useEvent` ์ฌ์ฉ๊ณผ ํจ๊ป ๋ค์๊ณผ ๊ฐ์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ์ฑ๋ฅ ์์ฐ: ํ๋ก์ ํธ ์ด๊ธฐ์ ์ฑ๋ฅ ์์ฐ์ ์ค์ ํ์ฌ ์ต์ ํ ๋ ธ๋ ฅ์ ์ด๋์ด ๊ฐ์ธ์. ์ด๋ ํนํ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํ ๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์ธ๋๋ ๋์ด์ง๋ฆฌ์์ ๊ฐ์ ๊ตญ๊ฐ์ ์ฌ์ฉ์๋ ๋ฏธ๊ตญ์ด๋ ์ ๋ฝ์ ์ฌ์ฉ์๋ณด๋ค ์ค๋๋ ๊ธฐ๊ธฐ๋ ๋๋ฆฐ ์ธํฐ๋ท ์๋๋ก ์ฑ์ ์ ์ํ ์ ์์์ ๊ธฐ์ตํ์ธ์.
- ์ฝ๋ ๋ถํ ๋ฐ ์ง์ฐ ๋ก๋ฉ: ์ฝ๋ ๋ถํ ์ ๊ตฌํํ์ฌ ์ด๊ธฐ ๋ ๋๋ง์ ํ์ํ JavaScript๋ง ๋ก๋ํ์ธ์. ์ง์ฐ ๋ก๋ฉ์ ์ค์ํ์ง ์์ ์ปดํฌ๋ํธ๋ ๋ชจ๋์ ๋ก๋ฉ์ ํ์ํ ๋๊น์ง ์ง์ฐ์์ผ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ต์ ํ๋ ์ด๋ฏธ์ง ํ์(WebP๋ ํ๋ฅญํ ์ ํ)์ ์ฌ์ฉํ๊ณ ์ด๋ฏธ์ง๋ฅผ ์ง์ฐ ๋ก๋ฉํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ด์ธ์. ์ด๋ฏธ์ง๋ ์ข ์ข ๊ธ๋ก๋ฒ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์ฃผ์ ์์ธ์ด ๋ ์ ์์ต๋๋ค. ์ฌ์ฉ์์ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ํฌ๊ธฐ์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ์บ์ฑ: ์ ์ ํ ์บ์ฑ ์ ๋ต(๋ธ๋ผ์ฐ์ ์บ์ฑ, ์๋ฒ ์ธก ์บ์ฑ)์ ๊ตฌํํ์ฌ ์๋ฒ ๋ถํ๋ฅผ ์ค์ด๊ณ ์ฒด๊ฐ ์ฑ๋ฅ์ ๊ฐ์ ํ์ธ์. ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ๊ฐ๊น์ด ๊ณณ์ ์ฝํ ์ธ ๋ฅผ ์บ์ํ์ธ์.
- ๋คํธ์ํฌ ์ต์ ํ: ๋คํธ์ํฌ ์์ฒญ ์๋ฅผ ์ต์ํํ์ธ์. CSS ๋ฐ JavaScript ํ์ผ์ ๋ฒ๋ค๋งํ๊ณ ์ถ์ํ์ธ์. ์๋ ๋ฒ๋ค๋ง์ ์ํด webpack์ด๋ Parcel๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ ๊ทผ์ฑ: ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์. ์ฌ๊ธฐ์๋ ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ ์ ๊ณต, ์๋งจํฑ HTML ์ฌ์ฉ, ์ถฉ๋ถํ ์์ ๋๋น ๋ณด์ฅ ๋ฑ์ด ํฌํจ๋ฉ๋๋ค. ์ด๋ ์ง์ญ์ ์ธ ์๊ตฌ ์ฌํญ์ด ์๋ ๊ธ๋ก๋ฒ ์๊ตฌ ์ฌํญ์ ๋๋ค.
- ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n): ์ฒ์๋ถํฐ ๊ตญ์ ํ๋ฅผ ๊ณํํ์ธ์. ์ฌ๋ฌ ์ธ์ด์ ์ง์ญ์ ์ง์ํ๋๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๊ณํ์ธ์. `react-i18next`์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฒ์ญ์ ๊ด๋ฆฌํ์ธ์. ๋ค๋ฅธ ๋ฌธํ์ ๋ง๊ฒ ๋ ์ด์์๊ณผ ์ฝํ ์ธ ๋ฅผ ์กฐ์ ํ๊ณ , ๋ค๋ฅธ ๋ ์ง/์๊ฐ ํ์๊ณผ ํตํ ํ์๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ํ ์คํธ: ๋ค์ํ ์ง์ญ(์: ์ํ๋ฆฌ์นด ์ผ๋ถ ์ง์ญ์ ๋๋ฆฐ ์ธํฐ๋ท)์ ์กด์ฌํ ์ ์๋ ์กฐ๊ฑด์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ๋ค์ํ ๊ธฐ๊ธฐ, ๋ธ๋ผ์ฐ์ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒ ์ ํ ํ ์คํธํ์ธ์. ์๋ํ๋ ํ ์คํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ์ ํ๋ฅผ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌํ์ธ์.
์ค์ ์์ ๋ฐ ์๋๋ฆฌ์ค
`useEvent`๊ฐ ์ ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ์ค์ ์๋๋ฆฌ์ค๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
- ํผ(Forms): ์ฌ๋ฌ ์ ๋ ฅ ํ๋์ ์ด๋ฒคํธ ํธ๋ค๋ฌ(์: `onChange`, `onBlur`)๊ฐ ์๋ ๋ณต์กํ ํผ์์ ์ด๋ฌํ ํธ๋ค๋ฌ์ `useEvent`๋ฅผ ์ฌ์ฉํ๋ฉด ํผ ์ปดํฌ๋ํธ์ ์์ ์ ๋ ฅ ์ปดํฌ๋ํธ์ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
- ๋ฆฌ์คํธ ๋ฐ ํ ์ด๋ธ: ํฐ ๋ฆฌ์คํธ๋ ํ ์ด๋ธ์ ๋ ๋๋งํ ๋ ํ ํด๋ฆญ์ด๋ ์น์ ํ์ฅ/์ถ์์ ๊ฐ์ ์์ ์ ๋ํ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ `useEvent`๊ฐ ์ ๊ณตํ๋ ์์ ์ฑ์ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค. ์ด๋ ๋ฆฌ์คํธ์ ์ํธ์์ฉํ ๋ ์ง์ฐ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
- ๋ํํ ์ปดํฌ๋ํธ: ๋๋๊ทธ ์ค ๋๋กญ ์์๋ ๋ํํ ์ฐจํธ์ ๊ฐ์ด ์ฆ์ ์ฌ์ฉ์ ์ํธ์์ฉ์ด ํฌํจ๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ์ด๋ฒคํธ ํธ๋ค๋ฌ์ `useEvent`๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐ์์ฑ๊ณผ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ๋ณต์กํ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ: UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ปดํฌ๋ํธ ํ๋ ์์ํฌ(์: Material UI, Ant Design)๋ก ์์ ํ ๋, ์ด๋ฌํ ์ปดํฌ๋ํธ ๋ด์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ `useEvent`์ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค. ํนํ ์ปดํฌ๋ํธ ๊ณ์ธต์ ํตํด ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ ๋ฌํ ๋ ์ ์ฉํฉ๋๋ค.
์์ : `useEvent`๋ฅผ ์ฌ์ฉํ ํผ
import React from 'react';
function useEvent(callback) {
const ref = React.useRef(callback);
ref.current = callback;
return React.useCallback((...args) => ref.current(...args), []);
}
function MyForm() {
const [name, setName] = React.useState('');
const [email, setEmail] = React.useState('');
const handleNameChange = useEvent((event) => {
setName(event.target.value);
});
const handleEmailChange = useEvent((event) => {
setEmail(event.target.value);
});
const handleSubmit = useEvent((event) => {
event.preventDefault();
console.log('Name:', name, 'Email:', email);
// Send data to server
});
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
value={name}
onChange={handleNameChange}
/>
<br />
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
value={email}
onChange={handleEmailChange}
/>
<br />
<button type="submit">Submit</button>
</form>
);
}
์ด ํผ ์์ ์์๋ `handleNameChange`, `handleEmailChange`, `handleSubmit`์ด ๋ชจ๋ `useEvent`๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ์ด์ ์ด์ ๋์์ต๋๋ค. ์ด๋ ํผ ์ปดํฌ๋ํธ(๋ฐ ๊ทธ ์์ ์ ๋ ฅ ์ปดํฌ๋ํธ)๊ฐ ๋ชจ๋ ํค ์ ๋ ฅ์ด๋ ๋ณ๊ฒฝ ์ ๋ถํ์ํ๊ฒ ๋ฆฌ๋ ๋๋ง๋์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ ํนํ ๋ ๋ณต์กํ ํผ์์ ๋์ ๋๋ ์ฑ๋ฅ ํฅ์์ ์ ๊ณตํ ์ ์์ต๋๋ค.
useCallback๊ณผ์ ๋น๊ต
`useEvent` ํ ์ ์ข ์ข `useCallback`์ ํ์์ฑ์ ๋จ์ํํฉ๋๋ค. `useCallback`๋ ์์ ์ ์ธ ํจ์๋ฅผ ์์ฑํ๋ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์์ง๋ง, ์์กด์ฑ์ ๊ด๋ฆฌํด์ผ ํ๋ฏ๋ก ๋๋๋ก ๋ณต์กํด์ง ์ ์์ต๋๋ค. `useEvent`๋ ์์กด์ฑ ๊ด๋ฆฌ๋ฅผ ์ถ์ํํ์ฌ ๋ง์ ์๋๋ฆฌ์ค์์ ์ฝ๋๋ฅผ ๋ ๊น๋ํ๊ณ ๊ฐ๊ฒฐํ๊ฒ ๋ง๋ญ๋๋ค. ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์์กด์ฑ์ด ์์ฃผ ๋ณ๊ฒฝ๋๋ ๋งค์ฐ ๋ณต์กํ ์๋๋ฆฌ์ค์์๋ ์ฌ์ ํ `useCallback`์ด ์ ํธ๋ ์ ์์ง๋ง, `useEvent`๋ ๋ ๊ฐ๋จํ๊ฒ ๊ด๋ฒ์ํ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
`useCallback`์ ์ฌ์ฉํ๋ ๋ค์ ์์ ๋ฅผ ๊ณ ๋ คํด ๋ณด๊ฒ ์ต๋๋ค:
function MyComponent(props) {
const [count, setCount] = React.useState(0);
const handleClick = React.useCallback(() => {
// Do something that uses props.data
console.log('Clicked with data:', props.data);
setCount(count + 1);
}, [props.data, count]); // Must include dependencies
return (
<button onClick={handleClick}>Click me</button>
);
}
`useCallback`์ ์ฌ์ฉํ๋ฉด ์์กด์ฑ ๋ฐฐ์ด์ ๋ชจ๋ ์์กด์ฑ(์: `props.data`, `count`)์ ๋์ด*ํด์ผ ํฉ๋๋ค*. ์์กด์ฑ์ ์์ด๋ฒ๋ฆฌ๋ฉด ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์ฌ๋ฐ๋ฅธ ๊ฐ์ ๊ฐ์ง ๋ชปํ ์ ์์ต๋๋ค. `useEvent`๋ ๋ช ์์ ์ธ ์์กด์ฑ ๊ด๋ฆฌ ์์ด ์ต์ ๊ฐ์ ์๋์ผ๋ก ์ถ์ ํจ์ผ๋ก์จ ๋๋ถ๋ถ์ ์ผ๋ฐ์ ์ธ ์๋๋ฆฌ์ค์์ ๋ ๊ฐ๋จํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค.
๊ฒฐ๋ก
`useEvent` ํ ์ React ์ ํ๋ฆฌ์ผ์ด์ , ํนํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์ ํํ๋ ๋ฐ ์ ์ฉํ ๋๊ตฌ์ ๋๋ค. ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ๋ํ ์์ ์ ์ธ ์ฐธ์กฐ๋ฅผ ์ ๊ณตํจ์ผ๋ก์จ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ์ต์ํํ๊ณ ์ฑ๋ฅ์ ๊ฐ์ ํ๋ฉฐ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํต๋๋ค. `useCallback`๋ ๊ทธ ์๋ฆฌ๊ฐ ์์ง๋ง, `useEvent`๋ ๋ง์ ์ผ๋ฐ์ ์ธ ์ด๋ฒคํธ ์ฒ๋ฆฌ ์๋๋ฆฌ์ค์ ๋ํด ๋ ๊ฐ๊ฒฐํ๊ณ ๊ฐ๋จํ ํด๊ฒฐ์ฑ ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ฐ๋จํ๋ฉด์๋ ๊ฐ๋ ฅํ ํ ์ ๊ตฌํํ๋ฉด ์๋นํ ์ฑ๋ฅ ํฅ์์ ๊ฐ์ ธ์ฌ ์ ์์ผ๋ฉฐ, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ์ข์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
์ง์ ์ผ๋ก ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค์ด ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์๊ตฌ๋ฅผ ์ถฉ์กฑ์ํค๋ ค๋ฉด `useEvent`๋ฅผ ์ฝ๋ ๋ถํ , ์ด๋ฏธ์ง ์ต์ ํ, ์ ์ ํ ์บ์ฑ ์ ๋ต๊ณผ ๊ฐ์ ๋ค๋ฅธ ์ต์ ํ ๊ธฐ์ ๊ณผ ๊ฒฐํฉํด์ผ ํ๋ค๋ ์ ์ ๊ธฐ์ตํ์ธ์.
๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ฑํํ๊ณ , ๊ธ๋ก๋ฒ ์์๋ฅผ ๊ณ ๋ คํ๋ฉฐ, `useEvent`์ ๊ฐ์ ๋๊ตฌ๋ฅผ ํ์ฉํจ์ผ๋ก์จ ์ฌ์ฉ์์ ์์น๋ ๊ธฐ๊ธฐ์ ๊ด๊ณ์์ด ํ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค.